<template>
  <page-container content="对信贷产品的额度、还款方式等进行配置" class="product-settings-container">
    <Promised :promise="getProductAsync">
      <template v-slot:pending>
        <Skeleton />
      </template>
      <template v-slot>
        <section>
          <LoanCard :product="product" />
          <a-card v-auth="'enable_switch'" :product="product" title="人工审核开关" class="card">
            <!-- <template #title>
              <div class="card-title-container">
                人工审核开关
              </div>
            </template> -->
            <template #extra>
              <a-switch :loading="checkedLoading" :checked="hasChecked" @change="changetoExamineStatus" />
            </template>
          </a-card>

          <RepaymentCard :product="product" />
        </section>
      </template>
    </Promised>
  </page-container>
</template>

<script>
import { getProduct, changePreExamineStatus } from '@/api/risk/admin'
import LoanCard from './card/Loan'
import RepaymentCard from './card/Repayment.vue'

export default {
  components: {
    LoanCard,
    RepaymentCard,
  },

  data () {
    return {
      getProductAsync: null,

      checkedLoading: false,

      // 产品
      product: {},
    }
  },

  computed: {
    hasChecked () {
      // 0 机
      // 1 人
      return this.product.examine === '1'
    },
  },

  created () {
    this.getProductAsync = this.getProduct()
  },

  methods: {
    // 审核状态
    changetoExamineStatus () {
      const { examine } = this.product

      const _self = this

      const title = this.hasChecked ? '开关关闭后，借款将由机器进行审核' : '开关开启后，借款将由人工介入审核'

      this.$confirm({
        title,
        content: '你还要继续吗？',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          _self.checkedLoading = true
          changePreExamineStatus()
            .then(() => {
              _self.product.examine = _self.hasChecked ? '0' : '1'
              _self.$notification.success({
                message: '修改成功!',
                duration: 1,
              })
            })
            .finally(() => {
              _self.checkedLoading = false
            })
        },
        onCancel () {
        },
      })
    },

    // 百分比转换
    conversionPercentage (product) {
      // 手续费
      product.s_charges.select[1] *= 100

      // 利息比例
      product.interest_ratio *= 100
      // 滞纳金比例
      product.late_fee_ratio *= 100

      // 还款方式
      product.s_repayment_way
        .forEach(item => {
          item.ratio *= 100
        })

      return product
    },

    getProduct () {
      return new Promise((resolve, reject) => {
        getProduct()
          .then(data => {
            this.product = this.conversionPercentage(data)
            resolve(data)
          })
          .catch(error => {
            reject(error)
          })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: $margin-sm;
}
</style>

<style lang="scss">
.product-settings-container {
  // suffix
  .ant-input-suffix,
  .ant-input-prefix {
    color: rgba($color: $black, $alpha: 0.3);
  }
}
</style>
